<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				<!-- <img  style="height:100%;" :src="collapsed?logoSmall:logoBig"/> -->
				恒华保险
			</el-col>
			<el-col :span="7">
				<div class="tools" @click.prevent="collapse">
					<i class="fa fa-align-justify"></i>
				</div>
			</el-col>
		
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner">
						<i class="el-icon-setting"></i> 菜单</span>
					<!-- <img :src="this.sysUserAvatar" /> -->
					<!-- {{sysUserName}} -->
					</span>
					<el-dropdown-menu slot="dropdown">
						<!-- <el-dropdown-item>我的消息</el-dropdown-item>
						<el-dropdown-item>设置</el-dropdown-item> -->
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
				<el-col :span="3" class="userinfo">
				<label class="detailLabel">欢迎</label>
				<span class="examineFonts">{{this.welcomeUser}}</span>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">

			<aside :class="collapsed?'menu-collapsed':'menu-expanded'" style="overflow-y:scroll;overflow-x:hidden;">

				<!--导航菜单-->
				<el-menu class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened v-show="!collapsed">
					<template v-for="(item,index) in menu">
						<el-submenu :index="index+''" v-if="item.isleaf=='false'" :key="item.menuid">
							<template slot="title">
								<i :class="item.icon"></i>{{item.menuname}}</template>
							<el-menu-item v-for="child in item.child" :index="child.menuid+''" :key="child.menuid" @click='goMenu(child)' v-if="!child.hidden">{{child.menuname}}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.isleaf=='true'" :index="item.menuid+''" :key="item.menuid" @click='goMenu(item)'>
							<i :class="item.icon"></i>{{item.menuname}}</el-menu-item>
					</template>
				</el-menu>
				<!--导航菜单-折叠后-->
				<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
					<li v-for="(item,index) in menu" class="el-submenu item" :key="item.menuid">
						<template v-if="item.isleaf=='false'">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
								<i :class="item.icon"></i>
							</div>
							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
								<li v-for="child in item.child" :key="child.menuid" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.menuurl)">{{child.menuname}}</li>
							</ul>
						</template>
						<template v-else>
							<li class="el-submenu">
								<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;min-width:180px;" :class="" @click="$router.push(item.children[0].menuurl)">
									<i :class="item.icon"></i>
								</div>
							</li>
						</template>
					</li>
				</ul>
			</aside>
			<section class="content-container" style="position:fix;">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
						<!-- <strong class="title">{{$route.name}}</strong> -->
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<!-- <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item> -->
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			logoBig: 'static/img/logo.png',
			logoSmall: '',
			collapsed: false,
			welcomeUser: '',
			sysUserName: '',
			sysUserAvatar: '',
			menu: [],
			nowurlmenu: {},
			menuinfo: [],
			headerShow: true,
			mainShow: true,
			routeArray: [],
			form: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
			}
		}
	},
	methods: {
		...mapActions([
			'CodeList', 'skipUrlData', 'gainWH', 'ProductList'
		]),
		goMenu: function (menu) {
			this.nowurlmenu = menu;
			if (menu.menuurl != null && menu.menuurl != '') {
				// this.$router.push(menu.menuurl);
				// sessionStorage.removeItem("nowUrl");
				sessionStorage.setItem("nowUrl", menu.menuurl);
				this.skipUrlData(menu.menuurl);

				this.$router.push({ path: menu.menuurl });

			}
		},
		onSubmit() {
		},
		handleopen() {
		},
		handleclose() {
			// console.log(this);
		},
		handleselect: function (a, b) {
			// console.log(a,b)
		},
		//退出登录
		logout: function () {
			var _this = this;
			this.$confirm('确认退出吗?', '提示', {
				// fullscreen: 'true',
				//type: 'warning'
				// modal-append-to-body:'false',
			}).then(() => {
				sessionStorage.removeItem('user');
				_this.$router.push('/login');
			}).catch(() => {

			});


		},
		//折叠导航栏
		collapse: function () {
			this.collapsed = !this.collapsed;
			let obj;
			if (this.collapsed) {
				obj = this.$store.state.echartObj;
				obj.style.width = (window.innerWidth - 90) + 'px';
				this.$store.state.mainLeft = 100 + 'px';
			}
			else {
				obj = this.$store.state.echartObj;
				obj.style.width = (window.innerWidth - 205) + 'px';
				this.$store.state.mainLeft = 300 + 'px';
			}
		},
		showMenu(i, status) {
			this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
		},
		lookupUrl(chilmenu) {
			if (chilmenu) {
				let _this = this;
				for (let j = 0; j < chilmenu.length; j++) {
					let chlidmenuItem = chilmenu[j];
					if (chlidmenuItem.child != undefined && chlidmenuItem.child != null) {
						_this.lookupUrl(chlidmenuItem.child);
					}
					if (chlidmenuItem.menuurl != undefined && chlidmenuItem.menuurl != null && chlidmenuItem.menuurl != "") {
						try {
							let component = {
								path: chlidmenuItem.menuurl,
								// component:resolve => require(["." + chilmenu[j].menuurl+".vue"], resolve)
								// component:TestAAAAA
								name: chlidmenuItem.menuname,
								resIds: chlidmenuItem.resIds,
								//component: require('./Login.vue')
								component: require("." + chlidmenuItem.menuurl + ".vue")

							};
							_this.menuinfo.push(component);
						} catch (e) {
							console.log(e);
						}
					}
				}
			}
		},
		loadMenu(_this) {
			//动态添加菜单信息
			const Home = resolve => require(['./Home.vue'], resolve)
			_this.routeArray = [
				{
					path: '/',
					component: Home,
					children: [
					]
				},
				{
					path: '*',
					hidden: true,
					redirect: { path: '/404' }
				}
			];
			for (let i = 0; i < _this.menu.length; i++) {
				let menuItem = _this.menu[i];
				if (menuItem.child != undefined && menuItem.child != null) {
					//递归查找路由信息
					try {
						_this.lookupUrl(menuItem.child);
					}
					catch (err) {
						_this.lookupUrl(menuItem);
					}
				}
				try {
					if (menuItem.menuurl) {

						let chlidmenuItem = menuItem;
						let component = {
							name: chlidmenuItem.menuname,
							resIds: chlidmenuItem.resIds,
							path: menuItem.menuurl,
							component: resolve => require([menuItem.menuurl + ".vue"], resolve)
						};
						_this.menuinfo.push(component);
					}

				} catch (e) {
					console.log(e);
				}

			}
			//添加信息至路由
			_this.routeArray[0].children = _this.menuinfo;
			_this.$router.addRoutes(
				_this.routeArray
			);

			if (_this.$route.path == "/") {
				_this.$router.push({ path: '/index' });
			}

		}
	},
	mounted() {
		let _this = this;
		_this.gainWH();
		_this.CodeList('RiskCode');
		_this.CodeList('BranchCode');
		_this.ProductList('');
		var url = sessionStorage.getItem('url');
		var userinfo = sessionStorage.getItem('user');
		if (userinfo) {
			var user = JSON.parse(userinfo);
			this.$store.commit('GET_USER', user);
			console.log(user);
			_this.menu = user.menus;
			this.sysUserName = user.userName || '';
			this.sysUserAvatar = user.avatar || '';
			this.loadMenu(_this);
			if (user.userId.substring(0, 2) == 'WX' || user.userId.substring(0, 2) == 'BS') {
				this.welcomeUser = user.mobile;
			} else {
				this.welcomeUser = user.userId;
			}
		}
		window.onscroll = function (e) {
			if (e && e.preventDefault)
				e.preventDefault();
			else
				window.event.returnValue = false;
		};

	}
}

</script>

<style scoped lang="scss">
@import "~scss_vars";

.el-submenu .el-menu-item {
  min-width: 180px;
}
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  .header {
    height: 30px;
    line-height: 30px;
    background: $color-primary;
    //background:#08B49E;
    color: #fff;
    .userinfo {
      text-align: right;
      padding-right: 30px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }
    .logo {
      //width:180px;
      height: 45px;
      font-size: 22px;
      border-color: rgba(238, 241, 146, 0.3);
      border-right-width: 1px;
      border-right-style: solid;
      text-align: center;
      img {
        width: 128px;
        margin: 5px 0;
      }
      .txt {
        color: #fff;
      }
    }
    .logo-width {
      width: 180px;
    }
    .logo-collapse-width {
      width: 60px;
      img {
        width: 50px;
      }
    }
    .tools {
      padding: 0px 23px;
      width: 14px;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
    }
  }
  .main {
    display: flex;
    // background: #324057;
    position: absolute;
    top: 30px;
    bottom: 0px;
    overflow: hidden;
    // overflow: scroll;
    // overflow-x: hidden;
    overflow-y: auto;
    aside {
      flex: 0 0 180px;
      width: 180px;
      // position: absolute;
      // top: 0px;
      // bottom: 0px;
      .el-menu {
        height: 100%;
      }
      .collapsed {
        width: 60px;
        .item {
          position: relative;
        }
        .submenu {
          position: absolute;
          top: 0px;
          left: 60px;
          z-index: 99999;
          height: auto;
          display: none;
        }
      }
    }
    .menu-collapsed {
      flex: 0 0 60px;
      width: 60px;
    }
    .menu-expanded {
      flex: 0 0 180px;
      width: 180px;
    }
    .menu-expanded ul {
      width: 180px !important;
    }
    .content-container {
      // background: #f1f2f7;
      flex: 1;
      // position: absolute;
      // right: 0px;
      // top: 0px;
      // bottom: 0px;
      // left: 180px;
      overflow-y: scroll;
      padding: 20px;
      .breadcrumb-container {
        //margin-bottom: 15px;
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }
}
</style>